<template>
  <div>
      <header><van-nav-bar :fixed="true" title="今日特价"
/></header>
      <main>
          <div class="pic">
              <p @click="tap1"><van-icon  name="arrow-left" /></p>
          </div>
          <div class="offerOne" v-for="(item,i) in products" :key="i">
              <router-link :to="'/detail/'+item._id">
                <img :src="item.coverImg" alt="">
              </router-link>
              <div>
                  <h2>{{item.name}}</h2>
                  <span class="van-ellipsis">{{item.descriptions}}</span>
                  <p>已售{{item.quantity}}&nbsp;&nbsp;&nbsp;&nbsp;30分钟&nbsp;&nbsp;&nbsp;配送￥{{Math.ceil((item.price+5)/10)}}</p>
                  <p><b>￥{{item.price}}</b>/斤</p>
                  <p>
                     <span>￥{{item.price+5}}</span><van-icon class="add" name="add" @click="addCart($event,item._id)"/>
                  </p>
                  <p>月售300</p>
              </div>
          </div>
      </main>
  </div>
 
</template>

<script>
import * as api from '@/api/getProlist'
import * as cartApi from '@/api/cart'
export default {
    name:'Todayoffer',
    data(){
        return{
            products:''
        }
    },
    methods:{
        tap1(){
            this.$router.go(-1)
        },
        addCart(e,id){
            console.log(id)
            console.log(e.target.className)
            if(e.target.className !== 'add van-icon van-icon-checked'){
                cartApi.addCart({product:id}).then(data=>{
                    this.$toast('添加购物车成功')
                    e.target.className = 'add van-icon van-icon-checked'
                    e.target.style.color = 'red'
                })
            }else{
                this.$dialog.alert({
                    title:'请求错误',
                    message:'购物车已有该商品，请确认是否跳转购物车'
                }).then(()=>{
                    this.$router.push('/cart')
                })
            }
        }
       
        },
     mounted(){
            console.log(this.$route.params.id)
            api.getProlist({product_category:this.$route.params.id}).then(data=>{
                console.log(data.data.products)
                this.products=data.data.products
                console.log(this.products)
            })

    }
}
</script>

<style scoped>
header{
     height:44px;
     text-align: center
}
main .pic{
    width: 100%;
    height: 120px;
    background:url(../images/speical.png) no-repeat center/cover;
    background-size: 90%;
    position: relative;
}
main .pic p{
    position: absolute;
    top: 21px;
    left: 15px;
    width: 30px;
    height:30px;
    font-size: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 3px;
    text-align:center;
    color: #fff;
    background: rgb(214, 211, 211);
}
main .pic p i{
    margin-left:-3px;
    text-align:center;
    line-height:24px;
}
main .offerOne{
    padding: 12px 12px 8px 12px;
    display: flex;
    margin-top: 20px;
    margin-left: 16px;
    margin-right: 16px;
    box-shadow: 0 0 190px #eee;
}
main .offerOne img{
    width: 91px;
    height: 74px;
    background: #eee;
    margin-right: 15px;
}
main .offerOne div{
    box-sizing: border-box;
   
   
}
main .offerOne div h2{
    color: #333;
    font-size: 16px;
    line-height: 22px;
}
main .offerOne div p:nth-of-type(1){
    color: #999;
    font-size: 12px;
    line-height: 17px;
}
main .offerOne div .van-ellipsis{
    display: block;
    width: 200px;
}
main .offerOne div p:nth-of-type(2) b{
    color: #FB6532;
    font-size: 16px;
    line-height: 17px;
}
main .offerOne div p:nth-of-type(2){
    color: #999;
    font-size: 12px;
    line-height: 17px;
}
main .offerOne div p:nth-of-type(3){
    display: flex;
    margin-left:50px; 
    color: #999;
    font-size: 12px;
    line-height: 17px;
    text-decoration: line-through;
}
main .offerOne div p:nth-of-type(3) span{
    display: inline-block;
    width:30px;
}
main .offerOne div p:nth-of-type(3) .add{
    margin-left: 90px;
    font-size: 30px;
    color: rgb(84, 199, 49)
}
main .offerOne div p:nth-of-type(4){
    margin-left: 160px;
    font-size: 12px;
    color:#999;
}
</style>
